<template>
   <div class="order-detail" v-show="orderInfo.goods.length">
      <!-- 顶部标题 -->
      <HeaderTop title="订单详情">
         <span class="iconfont icon-jiantou2" slot="left" @click="$router.replace('/order')"></span>
      </HeaderTop>
      <!-- 商品详情列表 -->
      <section class="goods-list">
         <!-- 单个商品详情 -->
         <div class="goods-item-info" v-for="item of orderInfo.goods" :key="item.id">
            <div class="info-top">
               <p class="shop-name">{{orderInfo.shopname}}</p>
               <span class="state">{{orderInfo.state?'已完成':'未完成'}}</span>
            </div>
            <div class="inof-center">
               <div class="food-pic">
                  <div class="img-box">
                     <img :src="item.pic" alt="">
                  </div>
                  <span>{{item.foodname}}</span>
               </div>
               <p class="food-count">x {{item.count}}</p>
            </div>
            <div class="info-bottom">
               <p class="order-time">
                  下单时间：<span>{{orderInfo.time}}</span>
               </p>
               <p class="order-total-price">
                  单价：<em>￥</em><strong>{{item.price}}</strong>
               </p>
            </div>
         </div>
         <div class="after-service" v-if="orderInfo.state">
            <a @click="afterService">
               <van-icon name="service-o" />
               <span>收货后服务</span>
            </a>
         </div>
      </section>
      <!-- 评分框 -->
      <section class="valuation-box"  v-show="showValuation" >
         <transition name="move">
            <div class="valuaation" @click.stop="" v-show="showValuation">
               <section>
                  <p class="title">
                     我的评价
                     <van-icon name="close" size="18px" @click="closeValuation"/>
                  </p>
                  <div class="shop-info">
                     <div class="pic">
                        <img :src="orderInfo.shoplogo" alt="">
                        <span class="shop-name">{{orderInfo.shopname}}</span>
                     </div>
                     <div class="valuation-time">{{orderInfo.time}}</div>
                  </div>
                  <div class="scoring">
                     满意度：<van-rate v-model="score" size="16px" icon="like" void-icon="like-o"/>
                  </div>
                  <div class="valuation-text">
                     <textarea @input="editTextarea" v-model="valuationText"></textarea>
                     <div class="text-bg" v-show="!isEditTextarea">
                        <van-icon name="edit" size="22px"/>从多个角度评价宝贝，可以帮助更多想买的人
                     </div>
                  </div>
               </section>
               <!-- 图片上传 -->
               <div class="pic-box">
                  <van-uploader v-model="fileList" multiple/>
               </div>
               <!-- 操作按钮 -->
               <div class="btns">
                  <button class="reset" @click="handlerReset">重置</button>
                  <button class="submit" @click="handlerSubmit">提交</button>
               </div>
            </div>
         </transition>
      </section>
      <!-- 底部联系客服/用户评价 -->
      <div class="add-to-order">
         <span class="total-money money-enough">合计：￥{{orderInfo.food_totalprice}}</span>
         <input class="pay" :class="{enough:!orderInfo.iscomment,'not-enough':orderInfo.iscomment}" v-if="orderInfo.state" @click="toValuation" :value="orderInfo.iscomment?'以评价':'评价'" :disabled="orderInfo.iscomment?true:false"/>
         <div class="pay enough" v-else style="background:#d9534f;">
            <van-icon name="phone-o" />
            联系商家
         </div>
      </div>
   </div>
</template>

<script>
import HeaderTop from '@/components/HeaderTop/HeaderTop'
import { getOrderDetailById, getShopInfo, insertComment, commentOrder } from '@/api/ajax'
import { formatDate } from '@/utils/tools'
import { mapState } from 'vuex'
import { Toast } from 'vant'

export default {
   name: 'OrderDetail', // 订单详情
   data() {
      return {
         orderInfo: {
            goods: []
         }, // 订单信息对象
         showValuation: false, // 默认不显示评价框
         score: 0, // 评价得分
         fileList: [],
         isEditTextarea: false, // 是否编辑丰富文本框
         valuationText: '', // 评论文本
         isloading: true, // 是否处于加载中
      }
   },
   components: {
      HeaderTop
   },
   async mounted() {
      // 获取订单详情数据
      const { orderInfo } = await getOrderDetailById(Number(this.$route.params.orderid))
      const { shopinfo: { logo } } = await getShopInfo(orderInfo.shoplist_id)
      this.orderInfo = orderInfo
      this.orderInfo.shoplogo = 'http://admi-yuliner.oss-cn-hangzhou.aliyuncs.com/shoplist/' + logo
      this.orderInfo.time = formatDate(orderInfo.time)
      this.orderInfo.time = this.orderInfo.time.slice(0,this.orderInfo.time.lastIndexOf(' '))
      for (let v of this.orderInfo.goods) {
         v.pic = 'http://admi-yuliner.oss-cn-hangzhou.aliyuncs.com/shopgoods/' + v.pic
      }
   },
   computed: {
      ...mapState('profile', ['userInfo'])
   },
   methods: {
      /* 去评价 */
      toValuation() {
         this.showValuation = true
      },
      /* 关闭评价框 */
      closeValuation() {
         this.showValuation = false
      },
      /* 提交评价信息 */
      handlerSubmit() {
         if (!this.valuationText || !this.score) return Toast('内容不能为空')
         this.showValuation = false
         const valuationObj = {
            score: Number(this.score), // 评论分值(0-5)
            content: this.valuationText, // 评论文本内容
            comments_user: this.userInfo.nickname, // 用户昵称
            userpic: this.userInfo.pic.slice(this.userInfo.pic.lastIndexOf('/')+1), // 用户头像
            user_id: this.userInfo.u_id, // 用户id
            shoplist_id: this.orderInfo.shoplist_id, // 店铺id
            fileArrayDaata: [], // 提交的评论拍照图
         }
         if (this.fileList.length >= 1) {
            for (let obj of this.fileList) {
               valuationObj.fileArrayDaata.push(obj.content)
            }
         }
         // 提交评论数据到服务器
         insertComment(valuationObj).then(({code}) => {
            if (code === 1) {
               Toast.success('评论成功');
               // 修改订单的评论状态
               commentOrder(this.orderInfo.id)
               this.orderInfo.iscomment = 1
               // 初始化存储评论信息的变量
               this.handlerReset()
            } else Toast.fail('评论失败')
         })
      },
      /* 重置信息 */
      handlerReset() {
         this.valuationText = ''
         this.fileList = []
         this.score = 0
         this.isEditTextarea = false
      },
      /* 售后服务 */
      afterService() {
         alert('售后服务')
      },
      /* 编辑富文本框 */
      editTextarea() {
         this.isEditTextarea = true
      },
   },
   watch: {
      valuationText(nval) {
         if (!nval) this.isEditTextarea = false
      }
   }
};
</script>

<style lang="stylus" scoped>
.order-detail {
   padding-top: 50px;
}
/* 商品详情 */
.goods-list {
   margin-top: 5px;
}
.goods-item-info {
   width: 97%;
   background: #fff;
   margin: 0 auto 10px;
   padding: 10px;
   box-sizing: border-box;
   border-radius: 6px;
   .info-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px dashed #ccc;
      .shop-name {
         font-size: 14px;
         color: #333;
         font-weight: 800;
      }
      .state { font-size: 12px;}
   }
   .inof-center {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      margin: 12px 0;
      .food-pic {
         display: flex;
         align-items: center;
         .img-box {
            width: auto;
            height: 76px;
            background: #efefef;
            border: 1px solid rgba(0,0,0,.2);
            padding: 3px;
            img { width: auto; height: 100%;}
         }
         span { margin-left: 10px;}
      }
   }
   .info-bottom {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .order-total-price {
         em { color: red; }
         strong {
            color: red;
            font-size: 16px;
            font-style: italic;
         }
      }
   }
}
/* 售后服务 */
.after-service {
   width: 97%;
   background: #fff;
   margin: 0 auto;
   padding: 10px;
   box-sizing: border-box;
   border-radius: 4px;
   font-size: 14px;
   display: flex;
   a { color: inherit; cursor:pointer;}
}

@keyframes move {
   from {
      transform: translateX(120%);
   } to {
      transform: translateX(0);
   }
}
.move-enter-active {
   animation: move .3s linear;
}
.move-leave-active {
   animation: move .3s linear reverse;
}
/* 评价弹出框 */
.valuation-box {
   font-size: 14px;
   width: 100%;
   max-width: 750px;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   z-index: 900;
   background: rgba(0, 0, 0, .5)
   .valuaation {
      width: 96%;
      background: #fff;
      margin: 100px auto 0;
      border-radius: 6px;

      section {
         width: 100%;
         padding: 10px;
         box-sizing: border-box;
      }
      /* 我的评价 */
      .title {
         margin-bottom: 10px;
         margin-top: 5px;
         padding-left: 5px;
         display: flex;
         justify-content: space-between;
         .van-icon{cursor:pointer;}
      }
      .shop-info {
         width: 100%;
         min-height: 80px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 10px;
         .pic {
            flex: 1
            display: flex;
            align-items: center;
            img {
               width: 30%;
               margin-right: 10px;
            }
         }
         .valuation-time { font-size: 12px;}
      }
      /* 满意度 */
      .scoring {
         margin: 10px 5px 15px;
      }
      /* 输入框 */
      .valuation-text {
         position relative;
         textarea {
            width: 100%;
            min-height: 60px;
            margin: 0;
            padding: 2px;
            box-sizing: border-box;
            position relative;
            z-index: 902;
            background: transparent;
            border: none;
         }
         .text-bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 901;
         }
      }
      /* 图片上传 */
      .pic-box {
         width: 100%;
         height: 80px;
         overflow: hidden;
         padding-left: 8px;
         box-sizing: border-box;
      }
      /* 操作按钮 */
      .btns {
         width: 100%;
         padding: 10px;
         box-sizing: border-box;
         display: flex;
         justify-content: flex-end;
         button {
            margin: 0 5px;
            color: #fff;
            padding: 2px 3px;
            font-size: 12px;
            padding: 4px 5px;
            cursor pointer
         }
         .reset {
            background: #d9534f;
            border: 1px solid #d43f3a;
         }
         .submit {
            background: #5cb85c;
            border: 1px solid #4cae4c;
         }
      }
   }
}

/* 联系商家 */
.add-to-order {
   width: 100%;
   max-width: 750px;
   height: 56px;
   background-color: #141d27;
   position: fixed;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   justify-content: space-between;
   align-items: center;
   box-sizing: border-box;
   font-size: 12px;
   .total-money { 
      margin-left: 10px;
      color: #80858a;
   }
   .money-enough { color: #fff;}
   .pay {
      width: 105px;
      height: 100%;
      line-height: 56px;
      text-align: center;
      font-weight: 700;
   }
   .enough {
      color: #fff;
      background: #00b43c;
      cursor pointer
   }
   .not-enough {
      color: #80858a;
      background: #2b333b;
   }
}
</style>